<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">字段配置：{{ tableName }}</span>
            <el-button
                :loading="genLoading"
                style="float: right; padding: 6px 9px;"
                type="success"
                @click="toSave(true)"
            >保存&生成
            </el-button>
            <el-button
                :loading="genLoading"
                style="float: right; padding: 6px 9px;margin-right: 9px"
                type="primary"
                @click="toSave(false)"
            >保存
            </el-button>
            <el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
              <el-button
                  :loading="syncLoading"
                  style="float: right; padding: 6px 9px;"
                  type="info"
                  @click="sync"
              >同步
              </el-button>
            </el-tooltip>
          </div>
          <el-form label-width="90px">
            <el-table v-loading="loading" :data="dataList" :max-height="tableHeight"
                      style="width: 100%;margin-bottom: 15px">
              <el-table-column prop="columnName" label="字段名称"/>
              <el-table-column prop="columnType" label="字段类型"/>
              <el-table-column prop="remark" label="字段描述">
                <template #default="scope">
                  <el-input v-model="scope.row.remark" class="edit-input"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="查询" width="70px">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.needQuery"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="必填" width="70px">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.notNull"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="列表" width="70px">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.listShow"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="表单" width="70px">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.formShow"/>
                </template>
              </el-table-column>

              <el-table-column label="表单类型">
                <template #default="scope">
                  <el-select v-model="scope.row.formType" filterable class="edit-input" clearable placeholder="请选择">
                    <el-option
                        label="文本框"
                        value="Input"
                    />
                    <el-option
                        label="单选框"
                        value="Radio"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="接口地址">
                <template #default="scope">
                  <el-input v-model="scope.row.url" clearable placeholder="接口地址"/>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">生成配置</span>
            <el-button
                :loading="configLoading"
                style="float: right; padding: 6px 9px"
                type="primary"
                @click="doSubmit"
            >保存
            </el-button>
          </div>
          <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="权限" prop="permission">
              <el-input v-model="formData.permission" style="width: 40%"/>
              <span style="color: #C0C0C0;margin-left: 10px;">权限</span>
            </el-form-item>
            <el-form-item label="作者名称" prop="author">
              <el-input v-model="formData.author" style="width: 40%"/>
              <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
            </el-form-item>
            <el-form-item label="至于包下" prop="pack">
              <el-input v-model="formData.pack" style="width: 40%"/>
              <span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
            </el-form-item>
            <el-form-item label="接口名称" prop="apiAlias">
              <el-input v-model="formData.apiAlias" style="width: 40%"/>
              <span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
            </el-form-item>
            <el-form-item label="前端路径" prop="path">
              <el-input v-model="formData.path" style="width: 40%"/>
              <span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
            </el-form-item>
            <el-form-item label="是否覆盖" prop="cover">
              <el-radio-group v-model="formData.cover" style="width: 40%">
                <el-radio-button label="true">是</el-radio-button>
                <el-radio-button label="false">否</el-radio-button>
              </el-radio-group>
              <span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span>
            </el-form-item>
            <el-form-item label="上级类目" prop="pid">
              <el-tree-select
                  v-model="formData.pid"
                  :data="menus"
                  style="width: 40%"
                  :props="treeProp"
                  placeholder="选择上级类目"
                  check-strictly
              >
              </el-tree-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script lang="ts" setup>

import mixins from "@/mixins/mixins";
import {ref, getCurrentInstance, toRefs, onMounted} from "vue"
import {get, post, put} from "@/utils/request";
import {ElMessage, FormInstance} from 'element-plus'

let {proxy} = getCurrentInstance();
let {dataList, data, initList} = mixins()
data.baseUrl = '/generator/columns'
const {queryParam, loading, formData, rules} = toRefs(data)
const tableName = proxy.$route.params.tableName
console.log('路由', proxy.$route.params)
formData.value = {
  id: null,
  tableName: tableName,
  author: 'zll',
  pack: 'com.qhsx.modules.qysl',
  path: '',
  moduleName: 'system',
  cover: 'false',
  apiPath: '',
  prefix: '',
  apiAlias: null
}

rules.value = {
  "permission": [
    {required: true, message: '请输入权限', trigger: 'blur'},
  ],
  "author": [
    {required: true, message: '请输入作者名称', trigger: 'blur'},
  ],
  "pack": [
    {required: true, message: '请输入包名', trigger: 'blur'},
  ],
  "apiAlias": [
    {required: true, message: '请输入接口名称', trigger: 'blur'},
  ],
  "path": [
    {required: true, message: '请输入前端路径', trigger: 'blur'},
  ],
  "cover": [
    {required: true, message: '请选择是否覆盖', trigger: 'change'},
  ],
  "pid": [
    {required: true, message: '请选择上级目录', trigger: 'change'},
  ],
}

queryParam.value.tableName = tableName
const menus = ref([])
const tableHeight = ref(550)


function initMenus() {
  get('/menus/all', {}).then(res => {
    menus.value = [{id: 0, meta: {title: '顶级类目'}, children: res}]
  })
}


const configLoading = ref(false)

function doSubmit() {
  const form = proxy.$refs['form'] as FormInstance
  form.validate((valid) => {
    if (valid) {
      console.log('data', formData.value)
      configLoading.value = true
      put('/genConfig', formData.value).then(res => {
        ElMessage({message: '保存成功', type: 'success'})
        configLoading.value = false
      }).catch(err => {
        configLoading.value = false
      })
    }
  })
}

const syncLoading = ref(false)

function sync() {
  syncLoading.value = true
  post('/generator/sync', [tableName]).then(() => {
    initList()
    ElMessage({message: '同步成功', type: 'success'})
    syncLoading.value = false
  }).then(() => {
    syncLoading.value = false
  })
}

const genLoading = ref(false)

function toSave(isGen: Boolean) {
  genLoading.value = true
  put('/generator', dataList.value).then(res => {
    ElMessage({message: '保存成功', type: 'success'})
    if (isGen) {
      post('/generator/' + tableName + '/0', {}).then(res => {
        genLoading.value = false
        ElMessage({message: '生成成功', type: 'success'})
      }).catch(err => {
        genLoading.value = false
      })
    } else {
      genLoading.value = false
    }
  }).catch(err => {
    genLoading.value = false
  })
}

function initData() {
  get('/genConfig/' + tableName, {}).then(data => {
    formData.value = data
  })
}


onMounted(() => {
  tableHeight.value = document.documentElement.clientHeight - 385
  initData()
  initMenus()
  initList()
})

const treeProp = {
  value: 'id', label: (item) => {
    return item.meta.title
  }
}
</script>
